<template>
	<Form :label-width="100">
		<div class="a">
			<FormItem class="w-50" label="顾客姓名:">
				<Input v-model="customer.customerName" placeholder="请输入姓名"></Input>
			</FormItem>
			<FormItem class="w-50" label="客户电话:">
				<Input v-model="customer.customerTelephone" placeholder="请输入电话号"></Input>
			</FormItem>
			<FormItem class="w-50" label="车架号:">
				<Input v-model="customer.customerFrameNo" placeholder="请输入车架号"></Input>
			</FormItem>
			<FormItem class="w-50" label="车牌号:">
				<Input v-model="customer.customerCarNo" placeholder="请输入车牌号"></Input>
			</FormItem>
		</div>
		<FormItem>
			<Button class="button" type="error" @click="modal = true" id="x">新增</Button>
		</FormItem>
		<Modal v-model="modal" title="请选择商品" @on-ok="ok" @on-cancel="cancel" ok-text="保存" cancel-text="取消">
			<table class="ta">
				<tr>
					<td>产品类型：</td>
					<td>
						<Select v-model="saleOrderItemListt.type" placeholder="请选择">
							<Option v-for="item in saleOrder " @click.native="cancelt()" :value="item">
								{{item}}
							</Option>
						</Select>
					</td>
				</tr>
				<tr>
					<td>产品名称：</td>
					<td>
						<Select v-model="saleOrderItemListt.productName">
							<Option v-for=" item in saleName " @click.native="getDescription(item.description)"
								:value="item.productName">
								{{item.productName}}
							</Option>
						</Select>
					</td>
				</tr>
				<tr>
					<td>汽车部位：</td>
					<td>
						<Select v-model="saleOrderItemListt.carPart">
							<Option v-for="carp in carParts" :value="carp">{{carp}}</Option>

						</Select>
					</td>
				</tr>
				<tr>
					<td>销售数量：</td>
					<td>
						<Input v-model="saleOrderItemListt.num" :min="0" placeholder="请输入数量"></Input>
					</td>
				</tr>
				<tr>
					<td>产品单价：</td>
					<td>
						<Input v-model="saleOrderItemListt.price" :min="0" placeholder="请输入价格"></Input>
					</td>
				</tr>
			</table>
		</Modal>

		<Layout :class="'bg-white'" id="tt">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="error" size="small" @click="remove(row)">删除</Button>
				</template>
			</Table>
			<FormItem class="text-center">
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="b" class="ml-2">返回</Button>
			</FormItem>
		</Layout>
	</Form>
</template>

<script>
	import store from '../../common/store.js';
	import local from '../../common/_local.js';
	import axios from 'axios';
	export default {
		data() {
			return {
				customer: {
					customerName: "", //客户姓名
					customerTelephone: "", //客户电话 
					customerFrameNo: '', //客户车架号
					customerCarNo: '', //客户车牌号
					state: 1, //订单状态
					salesperson: '' //销售员
				},
				saleOrderItemListt: {
					productType: '', //产品类型
					productName: '', //产品名称
					carPart: '', //部位
					num: '', //销售数量
					price: '', //产品单价	
					description: '' //产品描述
				},
				saleOrder: [], //产品类型
				saleName: [], //产品名称
				modal: false,
				tableInfo: {
					currentPage: 1,
					total: 0,
					data: [],
					columnInfo: [{
							title: "产品类型",
							key: "productType",
							align: 'center'

						},
						{
							title: "产品名称",
							key: "productName",
							align: 'center'
						},
						{
							title: "购买数量",
							key: "num",
							align: 'center'
						},
						{
							title: "产品单价",
							align: 'center',
							key: "price",

						},
						{
							title: "产品描述",
							align: 'center',
							key: "description",

						},
						{
							title: "汽车部位",
							align: 'center',
							key: "carPart",

						},
						{
							title: "操作",
							align: 'center',
							slot: 'action',
							width: '130px'
						}
					]
				},
				userInfo: {
					userId: '',
					userName: '',
					account: '',
					password: '',
					telephone: '',
					storeId: ''
				},
				time: '',
				carParts: ["全车", "车顶盖", "前保险杠", "后保险杠", "引擎盖", "后备箱", "左前叶子板", "右前叶子板", "左后叶子板", "右后叶子板", "左前门", "右前门",
					"左后门", "右后门", "左前车窗", "右前车窗", " 左后车窗", "右后车窗", "前挡风玻璃", "后挡风玻璃", "左前三角窗", "右前三角窗", "左后三角窗",
					"右后三角窗", "后视镜", "左侧裙", "右侧裙"
				],
			}
		},
		created: function() {
			this.customer.salesperson = local.getItem("USER_NAME");
			// this.user.userId = store.state.currentUser.user.userId;
			// this.user.userName = store.state.currentUser.user.userName;
			this.getsaleOrder();
		},
		methods: {
			ok() {
				if ('' == this.saleOrderItemListt.type) {
					this.$Message.error('产品类型不能为空！');
					this.clear();
					return;
				}
				if ('' == this.saleOrderItemListt.productName) {
					this.$Message.error('产品名称不能为空！');
					this.clear();
					return;
				}
				if (this.saleOrderItemListt.num <= 0) {
					this.$Message.error('销售数量至少为1！');
					this.clear();
					return;
				}
				let newProduct = {
					productType: this.saleOrderItemListt.type,
					productName: this.saleOrderItemListt.productName,
					carPart: this.saleOrderItemListt.carPart,
					num: this.saleOrderItemListt.num,
					price: this.saleOrderItemListt.price,
					description: this.saleOrderItemListt.description
				}

				this.tableInfo.data.push(newProduct);
				this.$Message.info('添加成功');
				//添加完清空上次选择
				this.clear();

			},
			cancel() {
				this.clear();
				this.$Message.info('取消成功');
			},
			remove: function(row) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除产品信息，确定吗？",
					onOk: () => {
						this.tableInfo.data.splice(row - 1, 1);
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			clear() {
				this.saleOrderItemListt.intoProductNum = 0;
				this.saleOrderItemListt.type = '';
				this.saleOrderItemListt.productName = '';
				this.saleOrderItemListt.num = '';
				this.saleOrderItemListt.carPart = '';
				this.saleOrderItemListt.price = '';
				this.saleOrderItemListt.description = '';
			},
			b: function() {
				this.$tabs.close();
			},
			submit: function() {
				// let self = this;
				// this.http.post({
				// 	url: "/sale_order_header/info", //提交接口
				// 	// param: saleOrderItemList
				// 	param: saleOrderItemList = [this.customer,this.saleOrderItemListt]
				// }).then(data => {
				// 	self.message.info("新增成功");
				// 	this.$tabs.close();
				// });
				let saleOrderHeaderWithSaleOrderItem = {
					customerName: this.customer.customerName,
					customerTelephone: this.customer.customerTelephone,
					customerFrameNo: this.customer.customerFrameNo,
					customerCarNo: this.customer.customerCarNo,
					userId: local.getItem("USER_ID"),
					saleperson: this.customer.salesperson,
					storeId: local.getItem("STORE_ID"),
					saleOrderItem: JSON.stringify(this.tableInfo.data),
					
				}
				let self = this;
				this.http.post({
					url: "/sale_order_header/info", //提交接口
					param: saleOrderHeaderWithSaleOrderItem
				}).then(data => {
					self.message.info("新增成功");
					this.$tabs.close();
				});
			},
			getsaleOrder: function() {
				this.http.get({ //商品产品类型接口
					url: "/product/type_list",
				}).then(data => {
					this.saleOrder = data;
				});
			},
			cancelt: function() {

				this.http.get({ //产品名称接口
					url: "/product/product_name",
					param: {
						type: this.saleOrderItemListt.type, 
					}
				}).then(data => {
					this.saleName = data;
				});
			},
			getDescription(des) {
				this.saleOrderItemListt.description = des;
			}
		}
	}
</script>

<style>
	.a {
		width: 50%;
		height: 55%;
		margin: 0 auto;
		margin-top: 10px;
		position: relative;
		left: 10%;
	}

	.a>* {
		margin-top: -10px;
	}

	.b {
		width: 100%;
		margin: 0 auto;
		position: absolute;
		right: -7%;
	}

	.input {
		width: 250px;
	}

	.button {
		width: 80px;
		margin-left: 1%;
	}

	.return {
		position: absolute;
		right: 15%;
		width: 80px;
		margin-top: 20px;
	}

	.save {
		width: 80px;
		margin-top: 20px;
	}

	.ta {
		margin-left: 25%;
		width: 250px;
	}

	.ta tr {
		line-height: 50px;
	}

	.ta tr td {
		width: 180px;
	}

	#x {
		position: relative;
		left: -100px;
		top: -40px;
	}

	#tt {
		position: relative;
		top: -50px;
	}
</style>
